<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

</head>
<body>

<div id="table_title">
<table align="center" width="100%"
       bordercolor="#339999" bgcolor="#DBDBDB"  id="gridtable_title" class="gridtable">
</table>
</div>
<table align="center" width="100%"
	bordercolor="#339999" bgcolor="#DBDBDB"  id="gridtable" class="gridtable">
</table>
</body>
</html>

<script type="text/javascript">
    function updateTable(data) {
        var result = eval(data);

        var html='<thead border="1" frame="below" class="tablehead">'
                +'<th width="16%">调查内容</th>'
                +'<th  width="12%">程度</th>'
                +'<th  width="12%">单位</th>'
                +'<th  width="12%">1</th>'
                +'<th  width="12%">2</th>'
                +'<th  width="12%">3</th>'
                +'<th  width="12%">4</th>'
                +'<th  width="12%">5</th>'
                +'</thead>';
        document.getElementById("gridtable_title").innerHTML=html;
        for(var i=0;i<result.length;i++){
            var  str='<tr>'
                    +'<input type="hidden" name="id" id="id_'+i+'" value="'+result[i].iD+'"/>'
                    +'<td width="16%" align="center" class="textItem">'+result[i].columnName+'</td>'
                    +'<td width="12%" align="center" class="textItem">'+result[i].nickName+'</td>'
                    +'<td width="12%" align="center" class="textItem">'+result[i].unit+'</td>'
                    +'<td width="12%"><input type="number" class="textInput" onfocus="inputfocus(this);" onblur="inputblur(this);"  id="surveyOne_"'+i+' name="surveyOne" value="'+result[i].surveyOne+'"></input></td>'
                    +'<td width="12%"><input type="number" class="textInput" onfocus="inputfocus(this);" onblur="inputblur(this);"  id="surveyTwo_"'+i+' name="surveyTwo" value="'+result[i].surveyTwo+'"></input></td>'
                    +'<td width="12%"><input type="number" class="textInput" onfocus="inputfocus(this);" onblur="inputblur(this);"  id="surveyThree_"'+i+' name="surveyThree" value="'+result[i].surveyThree+'"></input></td>'
                    +'<td width="12%"><input type="number" class="textInput" onfocus="inputfocus(this);" onblur="inputblur(this);"  id="surveyFour"'+i+' name="surveyFour" value="'+result[i].surveyFour+'"></input></td>'
                    +'<td width="12%"><input type="number" class="textInput" onfocus="inputfocus(this);" onblur="inputblur(this);"  id="surveyFive"'+i+' name="surveyFive" value="'+result[i].surveyFive+'"></input></td>'
                    +'</tr>';
            html=html+str;
        }

        var table = document.getElementById("gridtable");
        table.innerHTML=html;
    }

    function getData(){
        var arrayObj = [];
        var tbody=document.getElementsByTagName("tbody")[0];
        if (typeof(tbody) != "undefined") {
            var rows = tbody.getElementsByTagName("tr");

            if (typeof(rows) != "undefined")
                for (var i = 0; i < rows.length; i++) {
                    var obj = {};
                    var val = rows[i].getElementsByTagName("input");

                    obj.iD = val[0].value;
                    obj.surveyOne = val[1].value;
                    obj.surveyTwo = val[2].value;
                    obj.surveyThree = val[3].value;
                    obj.surveyFour = val[4].value;
                    obj.surveyFive = val[5].value;
                    obj.updateType = 1;

                    arrayObj.push(obj);
                }
        }
        window.android.onDataUpdate(JSON.stringify(arrayObj));
    }
    function inputfocus(obj){
    	obj.value=obj.value+'+';
    }
    function inputblur(obj){
    	var itemValue=obj.value.split('+');
    	var sum=0;
    	for(var i=0;i<itemValue.length;i++){
    		var val=0;
    		if(itemValue[i]!=0){
    			val=parseFloat(itemValue[i]);
    		}
    		if(isNaN(val)){
    			alert('输入的非数值，请重新输入！');
    			obj.value=0;
    			return;
    		}else{
    			if(val.length!=0){
    				sum=sum+val;
    			}
    		}
    	}
    	obj.value=sum;
    }

</script>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    #table_title{
        position: fixed;
        width: 100%;
        z-index: 1000;
        left: 0;
        top: 0;
    }
table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:12px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.gridtable th {
	border-width: 2px;
	padding: 8px;
	font-size:16px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
table.gridtable tbody tr:nth-child(odd) td {
  background-color:   #FCFCFC ;
}
.textInput {
    width: 90%;
    height: 40px;
    border-style: none;
    padding-left: 10px;
}
.textItem {
    font-size:14px;
}
.tablehead{
z-index: 1; 
background: #009933; 
text-align: center; 
}

</style>